<template>
    <div>
        <div class="box-left-1">
            <div class="box-left-11">
                <div class="big">
                    <img src="../../image/home1.png" alt="">
                </div>
                <div class="big-1">
                    <div>本期活动</div>
                    <div class="big-11">1528.32W</div>
                    <div class='sub'>
                        <div>
                            <div>类目一</div>
                            <div>53W</div>
                        </div>
                        <div>
                            <div>类目二</div>
                            <div>76W</div>
                        </div>
                        <div>
                            <div>类目三</div>
                            <div>34W</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="box-left-12">
                <div class="box-left-121">
                    <div>
                        <img src=""
                            alt="">
                    </div>
                    <div class="box-left-122">
                        <div class="box-left-123">934.7W</div>
                        <div class="box-left-124">今日DAU</div>
                    </div>
                </div>
                <div class="box-left-1212">
                    <div class="box-left-122">
                        <div class="box-left-123">24.93W</div>
                        <div class="box-left-124">今日DAU</div>
                    </div>
                    <div class="box-left-122">
                        <div class="box-left-123">984.25W</div>
                        <div class="box-left-124">总用户数</div>
                    </div>
                </div>
            </div>
            <div class="box-left-13">
                <div class="box-left-121">
                    <div>
                        <img src=""
                            alt="">
                    </div>
                    <div class="box-left-122">
                        <div class="box-left-123">934.7W</div>
                        <div class="box-left-124">今日DAU</div>
                    </div>
                </div>
                <div class="box-left-1212">
                    <div class="box-left-122">
                        <div class="box-left-123">24.93W</div>
                        <div class="box-left-124">今日DAU</div>
                    </div>
                    <div class="box-left-122">
                        <div class="box-left-123">984.25W</div>
                        <div class="box-left-124">总用户数</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>
.box-left-1 {
    width: 100%;
    height: 200px;
    display: flex;

    .box-left-11 {
        width: 45%;
        background-color: #2969ff;
        display: flex;

        .sub {
            display: flex;
            margin-top: 20px;

            div {
                width: 100px;
            }
        }

        .big {
            img {
                width: 150px;
                height: 150px;
                margin: 15px;
            }
        }

        .big-1 {
            font-size: 20px;
            color: #fff;
            margin-left: 10px;
            line-height: 30px;
            margin-top: 20px;

            .big-11 {
                font-size: 24px;
            }
        }
    }

    .box-left-12 {
        width: 27%;
        margin-left: 10px;
        background-color: #fff;

        .box-left-121 {
            display: flex;
            margin: 20px;

            img {
                width: 50px;
                height: 50px;
            }
        }

        .box-left-1212 {
            display: flex;
            margin-top: 50px;
        }

        .box-left-122 {
            margin-left: 30px;

            .box-left-123 {
                color: #000;
                font-size: 18px;
                font-weight: 900;
            }

            .box-left-124 {
                color: #ccc;
                margin-top: 10px;
            }
        }
    }

    .box-left-13 {
        width: 27%;
        margin-left: 10px;
        background-color: #fff;

        .box-left-121 {
            display: flex;
            margin: 20px;

            img {
                width: 50px;
                height: 50px;
            }
        }

        .box-left-1212 {
            display: flex;
            margin-top: 50px;
        }

        .box-left-122 {
            margin-left: 30px;

            .box-left-123 {
                color: #000;
                font-size: 18px;
                font-weight: 900;
            }

            .box-left-124 {
                color: #ccc;
                margin-top: 10px;
            }
        }
    }
}
</style>